<script setup>
import { onMounted, ref } from 'vue'
import { getNovelApi } from '@/api/novel.js'

const novelList = ref([])
const getNovelList = async () => {
  const res = await getNovelApi()
  // console.log(res.data.data)
  novelList.value = res.data.data
  console.log(novelList.value)
}
onMounted(() => {
  getNovelList()
})
</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-header
        ><div class="pull">
          <!-- 平台logo -->
          <div class="pull-left">
            <a href="">
              <img
                src="@/assets/九尾照片【最后大合照】_2_仅衍_来自小红书网页版.jpg"
                alt="九尾写作屋"
            /></a>
          </div>
          <!-- 搜索框 -->
          <div class="pull-center">
            <h1>学业有成，别让哥们失望</h1>
          </div>
          <!-- 右边个人主页 -->
          <div class="pull-right">
            <el-avatar
              src="src\assets\爱人如养花！LGD你做到了！_9_鑫蓁诣祈安._来自小红书网页版.jpg"
            />
          </div></div
      ></el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            class="el-menu-vertical-demo"
            active-text-color="#f8e77f"
            background-color="#5ca1e1"
            :default-active="$route.path"
            router
          >
            <el-menu-item
              :index="`/novel/${item.novelId}`"
              v-for="item in novelList"
              :key="item.novelId"
            >
              <el-icon><Management /></el-icon>
              <span>{{ item.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header>
            <el-menu
              :default-active="$route.path / $route.params.id"
              class="el-menu-demo"
              mode="horizontal"
              active-text-color="#5ca1e1"
              background-color="#f8e77f"
              router="true"
            >
              <el-menu-item index="/createNovel"
                >创建作品{{ $route.path }}</el-menu-item
              >
              <el-menu-item :index="`/updateNovel/id=${$route.params.id}`"
                >作品设置</el-menu-item
              >
              <el-menu-item :index="`/createChapter/id=${$route.params.id}`"
                >新建章节</el-menu-item
              >
            </el-menu>
          </el-header>
          <el-main>
            <RouterView></RouterView>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
  <!-- 导航 -->
</template>
<style scoped>
.pull {
  background-color: #ccc;
  height: 80px;
  display: flex;
  justify-content: space-around;
  line-height: 80px;
  .pull-left {
    height: 80px;
    padding: 20px, 20px;
    img {
      width: auto;
      height: 80px;
    }
  }
  .pull-center {
    h1 {
      text-align: center;
      color: rgb(92, 161, 225);
    }
  }
  .pull-right {
    a {
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      margin-top: 12px;
      img {
        /* display: inline; */
        /* padding: 0 25px; */
        width: 36px;
        height: 36px;
        border-radius: 18px;
      }
      span {
        font-size: 13px;
      }
    }
  }
}
</style>
